<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 520px;
            height: 280px;
            position: relative;
            /* overflow: hidden; */
            margin: 0 auto;
        }

        .imgContainer {
            position: absolute;
            width: 2600px;
            height: 280px;
            left: 0px;
        }

        .imgContainer img {
            float: left;
        }

        .nextPre {
            width: 520px;
            height: 50px;
            font-size: 40px;
            position: absolute;
            top: 40%;
            color: white;
        }

        .nextPre span:nth-child(1) {
            float: left;
            cursor: pointer;
        }

        .nextPre span:nth-child(2) {
            float: right;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="imgContainer">
            <img src="./imgs/1t.png">
            <img src="./imgs/2t.png">
            <img src="./imgs/3t.png">
            <img src="./imgs/4t.png">
            <img src="./imgs/5t.png">
        </div>
        <div class="nextPre"><span>< </span><span>></span></div>
    </div>
    <script>


        // 1。上一页（复制最后一张到第一张前面） 和下一页 （无限轮播）
        // 鼠标移入 imgContainerEle 停止自动轮播
        // 2.点 
        // 复习；


        //一、 鼠标移入时候停止轮播图自动播放 ，鼠标移除的时候 轮播图开始播放；
        // 二、下一页 上一页 ；

        var imgContainerEle = document.querySelector(".imgContainer");

        var containerEle = document.querySelector(".container");

        var page = 1;// 代表当前的图片  :当前图片现实的数字；

        // 自动播放 
        function autoPlay() {
            
            var timer = setInterval(function () {
                console.log("setinterval",page);
                move(imgContainerEle, -520 * page-520, "left", function () {
                    // console.log("运动完成");
                    page++;
                    if (page == 6) {
                        page = 1;
                        imgContainerEle.style.left = "-520px";
                    }
                })
            }, 2000);
            // 鼠标移入 和移除事件；：onmouseover onmouseout；  onmouseenter  onmouseleave
            containerEle.onmouseenter = function () {
                // 停止轮播自动播放
                console.log("停止");
                clearInterval(timer)
            }
            containerEle.onmouseleave = function () {
                console.log("移除");
                autoPlay()
            }


        }
        cloneElement();
        autoPlay();
        // 克隆元素；
        // deepCopy
        function cloneElement() {

            // 克隆第一个元素放在最后
            var firstEle = imgContainerEle.firstElementChild.cloneNode(true);
          
            // 克隆第五个元素到第一个前面
            var lastEle = imgContainerEle.lastElementChild.cloneNode(true);
            // 把克隆的元素放在第一个元素之前；
            imgContainerEle.insertBefore(lastEle,imgContainerEle.firstElementChild)
            
            imgContainerEle.style.width = "3640px";
            imgContainerEle.appendChild(firstEle);
            // 把第一张显示左边的偏移量 改成-520；
            imgContainerEle.style.left = "-520px";
        }


        // 上一页和下一页功能
        var eles = document.querySelectorAll(".nextPre span");

        // 下一页功能
        eles[1].onclick = function () {
            //下一页；
            move(imgContainerEle, -520 * page-520, "left", function () {
                    // console.log("运动完成");
                    page++;
                    console.log(page);
                    if (page == 6) {
                        page = 1;
                        imgContainerEle.style.left = "-520px";
                    }
                })
        }

        // 上一页功能
        // 当前在2页 -520*3= -1560px  ---》1040px
        eles[0].onclick = function(){
            // page--;
            move(imgContainerEle, -520 * page+520, "left", function () {
                    // console.log("运动完成");
                    page--;
                    console.log(page);
                    if(page==0){
                        page = 5;

                        imgContainerEle.style.left = "-2600px";
                    }
                    // if (page == 6) {
                    //     page = 1;
                    //     imgContainerEle.style.left = "0px";
                    // }
                })
        }


        function move(ele, target, dir, cb) {
            function fn() {
                var num = parseInt(getComputedStyle(ele)[dir]);
                var speed = target < num ? -10 : 10;
                if (num == target) {
                    // console.log("停止了");
                    cb && cb();
                } else {
                    num += speed;
                    ele.style[dir] = num + "px";
                    requestAnimationFrame(fn);
                }
            }
            fn();
        }
    </script>
</body>

</html>